Menguasai React Suspense: Meningkatkan Aplikasi Global dengan Manajemen Kumpulan Sumber Daya Pemuatan Data Bersama

Dalam lanskap pengembangan web modern yang luas dan saling terhubung, membangun aplikasi yang berkinerja tinggi, dapat diskalakan, dan tangguh adalah hal yang sangat penting, terutama saat melayani basis pengguna global yang beragam. Pengguna di seluruh benua mengharapkan pengalaman yang mulus, terlepas dari kondisi jaringan atau kemampuan perangkat mereka. React, dengan fitur-fitur inovatifnya, terus memberdayakan pengembang untuk memenuhi ekspektasi tinggi ini. Di antara tambahan yang paling transformatif adalah React Suspense, sebuah mekanisme kuat yang dirancang untuk mengatur operasi asinkron, terutama pengambilan data dan pemisahan kode, dengan cara yang memberikan pengalaman yang lebih lancar dan ramah pengguna.

Meskipun Suspense secara inheren membantu mengelola status pemuatan komponen individual, kekuatan sesungguhnya muncul ketika kita menerapkan strategi cerdas tentang bagaimana data diambil dan dibagikan di seluruh aplikasi. Di sinilah Manajemen Kumpulan Sumber Daya untuk pemuatan data bersama menjadi bukan hanya praktik terbaik, tetapi juga pertimbangan arsitektur yang krusial. Bayangkan sebuah aplikasi di mana beberapa komponen, mungkin di halaman yang berbeda atau dalam satu dasbor, semuanya memerlukan data yang sama – profil pengguna, daftar negara, atau nilai tukar mata uang secara real-time. Tanpa strategi yang kohesif, setiap komponen mungkin memicu permintaan data identik sendiri, yang mengarah pada panggilan jaringan yang berlebihan, peningkatan beban server, kinerja aplikasi yang lebih lambat, dan pengalaman yang kurang optimal bagi pengguna di seluruh dunia.

Panduan komprehensif ini akan mendalami prinsip-prinsip dan aplikasi praktis dari pemanfaatan React Suspense bersama dengan manajemen kumpulan sumber daya yang tangguh. Kita akan menjelajahi cara merancang lapisan pengambilan data Anda untuk memastikan efisiensi, meminimalkan redundansi, dan memberikan kinerja luar biasa, terlepas dari lokasi geografis atau infrastruktur jaringan pengguna Anda. Bersiaplah untuk mengubah pendekatan Anda terhadap pemuatan data dan membuka potensi penuh dari aplikasi React Anda.

Memahami React Suspense: Pergeseran Paradigma dalam UI Asinkron

Sebelum kita mendalami pooling sumber daya, mari kita bangun pemahaman yang jelas tentang React Suspense. Secara tradisional, menangani operasi asinkron di React melibatkan pengelolaan status pemuatan, status kesalahan, dan status data secara manual di dalam komponen, yang sering kali mengarah pada pola yang dikenal sebagai "fetch-on-render." Pendekatan ini dapat mengakibatkan rentetan pemintal pemuatan (loading spinners), logika rendering kondisional yang kompleks, dan pengalaman pengguna yang kurang ideal.

React Suspense memperkenalkan cara deklaratif untuk memberi tahu React: "Hei, komponen ini belum siap untuk dirender karena sedang menunggu sesuatu." Ketika sebuah komponen menangguhkan (misalnya, saat mengambil data atau memuat potongan kode yang dipisah), React dapat menjeda renderingnya, menampilkan UI fallback (seperti spinner atau layar kerangka) yang didefinisikan oleh batas <Suspense> leluhur, dan kemudian melanjutkan rendering setelah data atau kode tersedia. Ini memusatkan manajemen status pemuatan, membuat logika komponen lebih bersih dan transisi UI lebih lancar.

Ide inti di balik Suspense untuk Pengambilan Data adalah bahwa pustaka pengambilan data dapat berintegrasi langsung dengan perender React. Ketika sebuah komponen mencoba membaca data yang belum tersedia, pustaka tersebut "melemparkan promise." React menangkap promise ini, menangguhkan komponen, dan menunggu promise tersebut diselesaikan sebelum mencoba render ulang. Mekanisme elegan ini memungkinkan komponen untuk menyatakan kebutuhan data mereka secara "data-agnostik", sementara batas Suspense menangani status menunggu.

Tantangan: Pengambilan Data Berlebihan di Aplikasi Global

Meskipun Suspense menyederhanakan status pemuatan lokal, ia tidak secara otomatis menyelesaikan masalah beberapa komponen yang mengambil data yang sama secara independen. Pertimbangkan aplikasi e-commerce global:

• Seorang pengguna menavigasi ke halaman produk.
• Komponen <ProductDetails /> mengambil informasi produk.
• Secara bersamaan, komponen sidebar <RecommendedProducts /> mungkin juga memerlukan beberapa atribut dari produk yang sama untuk menyarankan item terkait.
• Komponen <UserReviews /> mungkin mengambil status ulasan pengguna saat ini, yang memerlukan ID pengguna – data yang sudah diambil oleh komponen induk.

Dalam implementasi yang naif, masing-masing komponen ini mungkin memicu permintaan jaringan sendiri untuk data yang sama atau tumpang tindih. Konsekuensinya signifikan, terutama untuk audiens global:

• Peningkatan Latensi dan Waktu Muat yang Lebih Lambat: Beberapa permintaan berarti lebih banyak perjalanan bolak-balik melalui jarak yang berpotensi jauh, memperburuk masalah latensi bagi pengguna yang jauh dari server Anda.
• Beban Server yang Lebih Tinggi: Infrastruktur backend Anda harus memproses dan menanggapi permintaan duplikat, menghabiskan sumber daya yang tidak perlu.
• Pemborosan Bandwidth: Pengguna, terutama yang menggunakan jaringan seluler atau di wilayah dengan paket data mahal, mengonsumsi lebih banyak data dari yang diperlukan.
• State UI yang Tidak Konsisten: Kondisi balapan (race conditions) dapat terjadi di mana komponen yang berbeda menerima versi data yang "sama" yang sedikit berbeda jika pembaruan terjadi di antara permintaan.
• Penurunan Pengalaman Pengguna (UX): Konten yang berkedip-kedip, interaktivitas yang tertunda, dan rasa lamban secara umum dapat menghalangi pengguna, yang mengarah pada tingkat pentalan yang lebih tinggi secara global.
• Logika Sisi Klien yang Kompleks: Pengembang sering kali menggunakan solusi memoization atau manajemen state yang rumit di dalam komponen untuk mengatasi hal ini, yang menambah kompleksitas.

Skenario ini menegaskan perlunya pendekatan yang lebih canggih: Manajemen Kumpulan Sumber Daya.

Memperkenalkan Manajemen Kumpulan Sumber Daya untuk Pemuatan Data Bersama

Manajemen kumpulan sumber daya, dalam konteks React Suspense dan pemuatan data, mengacu pada pendekatan sistematis untuk memusatkan, mengoptimalkan, dan berbagi operasi pengambilan data dan hasilnya di seluruh aplikasi. Alih-alih setiap komponen secara independen memulai permintaan data, sebuah "kumpulan" atau "cache" bertindak sebagai perantara, memastikan bahwa sepotong data tertentu hanya diambil sekali dan kemudian tersedia untuk semua komponen yang memintanya. Ini serupa dengan cara kerja kumpulan koneksi basis data atau kumpulan utas: menggunakan kembali sumber daya yang ada daripada membuat yang baru.

Tujuan utama dari penerapan kumpulan sumber daya pemuatan data bersama adalah:

• Menghilangkan Permintaan Jaringan yang Berlebihan: Jika data sudah diambil atau baru saja diambil, sediakan data yang ada atau promise yang sedang berlangsung dari data tersebut.
• Meningkatkan Kinerja: Mengurangi latensi dengan menyajikan data dari cache atau dengan menunggu satu permintaan jaringan bersama.
• Meningkatkan Pengalaman Pengguna: Memberikan pembaruan UI yang lebih cepat dan lebih konsisten dengan lebih sedikit status pemuatan.
• Mengurangi Beban Server: Menurunkan jumlah permintaan yang mengenai layanan backend Anda.
• Menyederhanakan Logika Komponen: Komponen menjadi lebih sederhana, hanya perlu menyatakan kebutuhan data mereka, tanpa mempedulikan bagaimana atau kapan data diambil.
• Mengelola Siklus Hidup Data: Menyediakan mekanisme untuk revalidasi, invalidasi, dan pembersihan data (garbage collection).

Ketika diintegrasikan dengan React Suspense, kumpulan ini dapat menampung promise dari pengambilan data yang sedang berlangsung. Ketika sebuah komponen mencoba membaca data dari kumpulan yang belum tersedia, kumpulan tersebut mengembalikan promise yang tertunda, menyebabkan komponen menangguhkan. Setelah promise diselesaikan, semua komponen yang menunggu promise tersebut akan dirender ulang dengan data yang diambil. Ini menciptakan sinergi yang kuat untuk mengelola alur asinkron yang kompleks.

Strategi untuk Manajemen Sumber Daya Pemuatan Data Bersama yang Efektif

Mari kita jelajahi beberapa strategi tangguh untuk mengimplementasikan kumpulan sumber daya pemuatan data bersama, mulai dari solusi kustom hingga memanfaatkan pustaka yang sudah matang.

1. Memoization dan Caching di Lapisan Data

Pada dasarnya, pooling sumber daya dapat dicapai melalui memoization dan caching di sisi klien. Ini melibatkan penyimpanan hasil permintaan data (atau promise itu sendiri) dalam mekanisme penyimpanan sementara, mencegah permintaan identik di masa depan. Ini adalah teknik dasar yang menopang solusi yang lebih canggih.

Implementasi Cache Kustom:

Anda dapat membangun cache dalam memori dasar menggunakan Map atau WeakMap JavaScript. Map cocok untuk caching umum di mana kunci adalah tipe primitif atau objek yang Anda kelola, sementara WeakMap sangat baik untuk caching di mana kunci adalah objek yang mungkin dibersihkan oleh garbage collector, memungkinkan nilai yang di-cache juga ikut dibersihkan.

            const dataCache = new Map();

function fetchWithCache(url, options) {
  if (dataCache.has(url)) {
    return dataCache.get(url);
  }

  const promise = fetch(url, options)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      dataCache.delete(url); // Hapus entri jika pengambilan gagal
      throw error;
    });

  dataCache.set(url, promise);
  return promise;
}

// Contoh penggunaan dengan Suspense
let userData = null;
function readUser(userId) {
  if (userData === null) {
    const promise = fetchWithCache(`/api/users/${userId}`);
    promise.then(data => (userData = data));
    throw promise; // Suspense akan menangkap promise ini
  }
  return userData;
}

function UserProfile({ userId }) {
  const user = readUser(userId);
  return <h2>Selamat datang, {user.name}</h2>;
}

            

              
                Copy
              
            
          

Contoh sederhana ini menunjukkan bagaimana dataCache bersama dapat menyimpan promise. Ketika readUser dipanggil beberapa kali dengan userId yang sama, ia akan mengembalikan promise yang di-cache (jika sedang berlangsung) atau data yang di-cache (jika sudah diselesaikan), mencegah pengambilan berulang. Tantangan utama dengan cache kustom adalah mengelola invalidasi cache, revalidasi, dan batas memori.

2. Penyedia Data Terpusat dan React Context

Untuk data spesifik aplikasi yang mungkin terstruktur atau memerlukan manajemen state yang lebih kompleks, React Context dapat berfungsi sebagai fondasi yang kuat untuk penyedia data bersama. Komponen penyedia pusat dapat mengelola logika pengambilan dan caching, mengekspos antarmuka yang konsisten bagi komponen anak untuk mengonsumsi data.

            import React, { createContext, useContext, useState, useEffect } from 'react';

const UserContext = createContext(null);

const userResourceCache = new Map(); // Cache bersama untuk promise data pengguna

function getUserResource(userId) {
  if (!userResourceCache.has(userId)) {
    let status = 'pending';
    let result;
    const suspender = fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(
        (r) => {
          status = 'success';
          result = r;
        },
        (e) => {
          status = 'error';
          result = e;
        }
      );
    userResourceCache.set(userId, { read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }});
  }
  return userResourceCache.get(userId);
}

export function UserProvider({ children, userId }) {
  const userResource = getUserResource(userId);
  const user = userResource.read(); // Akan menangguhkan jika data belum siap

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (context === null) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

// Penggunaan dalam komponen:
function UserGreeting() {
  const user = useUser();
  return <p>Halo, {user.firstName}!</p>;
}

function UserAvatar() {
  const user = useUser();
  return <img src={user.avatarUrl} alt={user.name + " avatar"} />;
}

function Dashboard() {
  const currentUserId = 'user123'; // Asumsikan ini berasal dari konteks otentikasi atau prop
  return (
    <Suspense fallback={<div>Memuat Data Pengguna...</div>}>
      <UserProvider userId={currentUserId}>
        <UserGreeting />
        <UserAvatar />
        <!-- Komponen lain yang memerlukan data pengguna -->
      </UserProvider>
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, UserProvider mengambil data pengguna menggunakan cache bersama. Semua anak yang menggunakan UserContext akan mengakses objek pengguna yang sama (setelah diselesaikan) dan akan menangguhkan jika data masih dimuat. Pendekatan ini memusatkan pengambilan data dan menyediakannya secara deklaratif di seluruh sub-pohon.

3. Memanfaatkan Pustaka Pengambilan Data yang Mendukung Suspense

Untuk sebagian besar aplikasi global, membuat solusi pengambilan data yang tangguh dan mendukung Suspense dari awal dengan caching, revalidasi, dan penanganan kesalahan yang komprehensif dapat menjadi upaya yang signifikan. Di sinilah pustaka khusus bersinar. Pustaka-pustaka ini dirancang khusus untuk mengelola kumpulan sumber daya data, berintegrasi secara mulus dengan Suspense, dan menyediakan fitur-fitur canggih yang siap pakai.

a. SWR (Stale-While-Revalidate)

Dikembangkan oleh Vercel, SWR adalah pustaka pengambilan data yang ringan yang memprioritaskan kecepatan dan reaktivitas. Prinsip intinya, "stale-while-revalidate," berarti ia pertama-tama mengembalikan data dari cache (basi), kemudian memvalidasi ulang dengan mengirimkan permintaan pengambilan, dan akhirnya memperbarui dengan data baru. Ini memberikan umpan balik UI segera sambil memastikan kebaruan data.

SWR secara otomatis membangun cache bersama (kumpulan sumber daya) berdasarkan kunci permintaan. Jika beberapa komponen menggunakan useSWR('/api/data'), mereka semua akan berbagi data cache yang sama dan promise pengambilan yang mendasarinya, secara efektif mengelola kumpulan sumber daya secara implisit.

            import useSWR from 'swr';
import React, { Suspense } from 'react';

const fetcher = (url) => fetch(url).then((res) => res.json());

function UserProfile({ userId }) {
  // SWR akan secara otomatis berbagi data dan menangani Suspense
  const { data: user } = useSWR(`/api/users/${userId}`, fetcher, { suspense: true });
  return <h2>Selamat datang, {user.name}</h2>;
}

function UserSettings() {
  const { data: user } = useSWR(`/api/users/current`, fetcher, { suspense: true });
  return (
    <div>
      <p>Email: {user.email}</p>
      <!-- Pengaturan lainnya -->
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Memuat profil pengguna...</div>}>
      <UserProfile userId="123" />
      <UserSettings />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, jika UserProfile dan UserSettings entah bagaimana meminta data pengguna yang sama persis (misalnya, keduanya meminta /api/users/current), SWR memastikan hanya satu permintaan jaringan yang dibuat. Opsi suspense: true memungkinkan SWR untuk melemparkan promise, membiarkan React Suspense mengelola status pemuatan.

b. React Query (TanStack Query)

React Query adalah pustaka pengambilan data dan manajemen state yang lebih komprehensif. Ini menyediakan hook yang kuat untuk mengambil, caching, menyinkronkan, dan memperbarui state server di aplikasi React Anda. React Query juga secara inheren mengelola kumpulan sumber daya bersama dengan menyimpan hasil kueri di cache global.

Fitur-fiturnya termasuk pengambilan ulang di latar belakang, upaya ulang yang cerdas, paginasi, pembaruan optimistis, dan integrasi mendalam dengan React DevTools, membuatnya cocok untuk aplikasi global yang kompleks dan padat data.

            import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React, { Suspense } from 'react';

const queryClient = new QueryClient({ 
  defaultOptions: { 
    queries: { 
      suspense: true,
      staleTime: 1000 * 60 * 5, // Data dianggap baru selama 5 menit
    }
  }
});

const fetchUserById = async (userId) => {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error('Gagal mengambil pengguna');
  return res.json();
};

function UserInfoDisplay({ userId }) {
  const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUserById(userId) });
  return <div>Pengguna: <b>{user.name}</b> ({user.email})</div>;
}

function UserDashboard({ userId }) {
  return (
    <div>
      <h3>Dasbor Pengguna</h3>
      <UserInfoDisplay userId={userId} />
      <!-- Potensi komponen lain yang membutuhkan data pengguna -->
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Memuat data aplikasi...</div>}>
        <UserDashboard userId="user789" />
      </Suspense>
    </QueryClientProvider>
  );
}

            

              
                Copy
              
            
          

Di sini, useQuery dengan queryKey yang sama (misalnya, ['user', 'user789']) akan mengakses data yang sama di cache React Query. Jika sebuah kueri sedang berlangsung, panggilan berikutnya dengan kunci yang sama akan menunggu promise yang sedang berlangsung tanpa memulai permintaan jaringan baru. Pooling sumber daya yang tangguh ini ditangani secara otomatis, membuatnya ideal untuk mengelola pemuatan data bersama dalam aplikasi global yang kompleks.

c. Apollo Client (GraphQL)

Untuk aplikasi yang menggunakan GraphQL, Apollo Client adalah pilihan populer. Ia dilengkapi dengan cache ternormalisasi yang terintegrasi yang bertindak sebagai kumpulan sumber daya yang canggih. Ketika Anda mengambil data dengan kueri GraphQL, Apollo menyimpan data di cachenya, dan kueri berikutnya untuk data yang sama (bahkan jika terstruktur secara berbeda) akan sering kali dilayani dari cache tanpa permintaan jaringan.

Apollo Client juga mendukung Suspense (eksperimental dalam beberapa konfigurasi, tetapi berkembang pesat). Dengan menggunakan hook useSuspenseQuery (atau mengonfigurasi useQuery untuk Suspense), komponen dapat memanfaatkan status pemuatan deklaratif yang ditawarkan Suspense.

            import { ApolloClient, InMemoryCache, ApolloProvider, useSuspenseQuery, gql } from '@apollo/client';
import React, { Suspense } from 'react';

const client = new ApolloClient({
  uri: 'https://your-graphql-api.com/graphql',
  cache: new InMemoryCache(),
});

const GET_PRODUCT_DETAILS = gql`
  query GetProductDetails($productId: ID!) {
    product(id: $productId) {
      id
      name
      description
      price
      currency
    }
  }
`;

function ProductDisplay({ productId }) {
  // Cache Apollo Client bertindak sebagai kumpulan sumber daya
  const { data } = useSuspenseQuery(GET_PRODUCT_DETAILS, {
    variables: { productId },
  });
  const { product } = data;
  return (
    <div>
      <h2>{product.name} ({product.currency} {product.price})</h2>
      <p>{product.description}</p>
    </div>
  );
}

function RelatedProducts({ productId }) {
  // Komponen lain yang menggunakan data yang berpotensi tumpang tindih
  // Cache Apollo akan memastikan pengambilan yang efisien
  const { data } = useSuspenseQuery(GET_PRODUCT_DETAILS, {
    variables: { productId },
  });
  const { product } = data;
  return (
    <div>
      <h3>Pelanggan juga menyukai untuk {product.name}</h3>
      <!-- Logika untuk menampilkan produk terkait -->
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Suspense fallback={<div>Memuat informasi produk...</div>}>
        <ProductDisplay productId="prod123" />
        <RelatedProducts productId="prod123" /> 
      </Suspense>
    </ApolloProvider>
  );
}
```

import { queryClient } from './queryClientConfig'; // Asumsikan queryClient diekspor
import { fetchUserDetails } from './api'; // Asumsikan fungsi API

// Contoh: Melakukan prefetch data pengguna saat mouse hover
function UserLink({ userId, children }) {
  const handleMouseEnter = () => {
    queryClient.prefetchQuery({ queryKey: ['user', userId], queryFn: () => fetchUserDetails(userId) });
  };

  return (
    <a href={`/users/${userId}`} onMouseEnter={handleMouseEnter}>
      {children}
    </a>
  );
}

// Saat komponen UserProfile dirender, data kemungkinan sudah ada di cache:
// function UserProfile({ userId }) {
//   const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUserDetails(userId), suspense: true });
//   return <h2>{user.name}</h2>;
// }

            

              
                Copy
              
            
          

            class ResourcePoolManager {
  constructor() {
    this.pool = new Map(); // Menyimpan promise atau data/sumber daya yang sudah diselesaikan
    this.subscribers = new Map(); // Melacak komponen yang menunggu sumber daya
  }

  // Memperoleh sumber daya (data, koneksi WebSocket, dll.)
  acquire(key, resourceFetcher) {
    if (this.pool.has(key)) {
      return this.pool.get(key);
    }

    let status = 'pending';
    let result;
    const suspender = resourceFetcher()
      .then(
        (r) => {
          status = 'success';
          result = r;
          this.notifySubscribers(key, r); // Beri tahu komponen yang menunggu
        },
        (e) => {
          status = 'error';
          result = e;
          this.notifySubscribers(key, e); // Beri tahu dengan kesalahan
          this.pool.delete(key); // Bersihkan sumber daya yang gagal
        }
      );
    
    const resourceWrapper = { read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }};

    this.pool.set(key, resourceWrapper);
    return resourceWrapper;
  }

  // Untuk skenario di mana sumber daya perlu dilepaskan secara eksplisit (misalnya, WebSocket)
  release(key) {
    if (this.pool.has(key)) {
      // Lakukan logika pembersihan khusus untuk jenis sumber daya
      // mis., this.pool.get(key).close();
      this.pool.delete(key);
      this.subscribers.delete(key);
    }
  }

  // Mekanisme untuk berlangganan/memberi tahu komponen (disederhanakan)
  // Dalam skenario nyata, ini kemungkinan akan melibatkan konteks React atau hook kustom
  notifySubscribers(key, data) {
    // Implementasikan logika notifikasi aktual, mis., paksa pembaruan subscriber
  }
}

// Instans global atau dilewatkan melalui Context
const globalResourceManager = new ResourcePoolManager();

// Penggunaan dengan hook kustom untuk Suspense
function useResource(key, fetcherFn) {
  const resourceWrapper = globalResourceManager.acquire(key, fetcherFn);
  return resourceWrapper.read(); // Akan menangguhkan atau mengembalikan data
}

// Penggunaan komponen:
function FinancialDataWidget({ stockSymbol }) {
  const data = useResource(`stock-${stockSymbol}`, () => fetchStockData(stockSymbol));
  return <p>{stockSymbol}: {data.price}</p>;
}

            

              
                Copy
              
            
          

import React, { Suspense } from 'react';
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      staleTime: 1000 * 60 * 10, // Cache selama 10 menit
      refetchOnWindowFocus: false, // Untuk aplikasi global, mungkin ingin pengambilan ulang yang tidak terlalu agresif
    },
  },
});

const fetchCategories = async () => {
  console.log('Mengambil kategori berita...'); // Hanya akan dicatat sekali
  const res = await fetch('/api/news/categories');
  if (!res.ok) throw new Error('Gagal mengambil kategori');
  return res.json();
};

const fetchHeadlinesByCategory = async (category) => {
  console.log(`Mengambil headline untuk: ${category}`); // Akan dicatat per kategori
  const res = await fetch(`/api/news/headlines?category=${category}`);
  if (!res.ok) throw new Error(`Gagal mengambil headline untuk ${category}`);
  return res.json();
};

function CategorySelector() {
  const { data: categories } = useQuery({ queryKey: ['newsCategories'], queryFn: fetchCategories });
  return (
    <ul>
      {categories.map((category) => (
        <li key={category.id}>{category.name}</li>
      ))}
    </ul>
  );
}

function TrendingTopics() {
  const { data: categories } = useQuery({ queryKey: ['newsCategories'], queryFn: fetchCategories });
  const trendingCategory = categories.find(cat => cat.isTrending)?.name || categories[0]?.name;
  
  // Ini akan mengambil headline untuk kategori tren, berbagi data kategori
  const { data: trendingHeadlines } = useQuery({ 
    queryKey: ['headlines', trendingCategory], 
    queryFn: () => fetchHeadlinesByCategory(trendingCategory),
  });

  return (
    <div>
      <h3>Berita Tren di {trendingCategory}</h3>
      <ul>
        {trendingHeadlines.slice(0, 3).map((headline) => (
          <li key={headline.id}>{headline.title}</li>
        ))}
      </ul>
    </div>
  );
}

function AppContent() {
  return (
    <div>
      <h1>Pusat Berita Global</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <section>
          <h2>Kategori yang Tersedia</h2>
          <CategorySelector />
        </section>
        <section>
          <TrendingTopics />
        </section>
      </div>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Memuat data berita global...</div>}>
        <AppContent />
      </Suspense>
    </QueryClientProvider>
  );
}
```